<!DOCTYPE html>
<html>
<head>
	<title>DOM初识</title> 
	<script type="text/javascript">
//通过id获取元素节点
//document.getElementById();

window.onload = function(){
	var btn = document.getElementById("but");
	btn.onclick = function(){
	console.log("我好帅啊");
	//内容写在window.onload = function(){
	// 内容写在这里面
	//}

}
}

 

// document.write("<h1>"+"张云龙加油啊"+"</h1>");
//通过id过去元素
console.log(document.getElementById("zz"));
</script>
</head>
<body>
<!-- 
DOM document object model 文档对象模型
	对html页面进行任意操作
 文档：
 - 文档表示整个HTML文档
 对象：
 -对象表示把html中的任何部分转换为对象模	型
 模型：
 -使用模型鄙视对象之间的关系，方便获取对	象

 节点 node 是构成网页最基本的组成部分，基本单元节点分类：
 1.文档节点 - 整个html文档
 2.元素节点 - +html的文档中的html标签
 3.属性节点 - 标签/元素属性
 4.文本节点 - HTML标签中的文本内容

 浏览器已经为我们提供文档节点对象，这个对象就是window属性。
 - 可以在页面中直接使用，这个文档代表整个网页


1.通过id获取，domcument.getElementById
- get 通过 Element 元素 By 通过  id选择器
	ID是唯一的，可以起多个id，但一个id名称只能在这个页面用一次

事件就是让浏览器窗口和文档发生交互瞬间
javascript和html之间交互是通过事件实现的
wed浏览器中常见的：例如 点击某个元素

触发按钮弹窗才执行
1.
onclick = "alert('点我干什么')";
如果连续需要使用引号，外面用双引号，里面就用单引号，如果都用双引号会导致代码识别不出来哪个是开始哪个是结束。
onclick鼠标单机事件
ondbclick 双击事件 db-double


js在页面中的位置
	1·js写在标签上
		小面这种情况叫结构和行为耦合，不利于页面管理和修改。不太建议这样写
		<button id="but" onclick="alert('干什么')">骑着火车去拉萨</button>
	2·js的script标签放head中，在页面上面
		浏览器加载页面是按照自上而下的顺序加载的。
		读到第一行运行第一行
		在代码执行时页面还没加载，页面没加载dom对象就没加载，dom对象没加载，就无法获取到dom元素，就会报错
		解决办法：
			添加onload事件，onload事件在整个页面中加载完之后触发。
			onload可以给ing，window绑定
			onload事件对应的响应函数将会在页面加载完之后执行，这样可以确保加载js时dom对象加载完毕
			自己添加的：
				在window.onload = function(){ 操作内容}

			window.onload = function(){
			函数名.onclick = function(){
				alelrt("六的一批")
			}
			}
	3·js写到html元素下面
		html代码加载完之后，加载js代码，执行js代码。
	4.外部链接js文件
		外面链接地址在head标签中 js文件中也需要以Windows·onload = function(){}开始 如果链接地址放在HTML页面最下面 就不需要写

		在使用事件之前需要绑定事件
		可以为按钮的对应事件绑定处理函数的形式绑定事件，事件触发时对应的函数也会被调用

		事件绑定
		事件单击事件
		事件名.onclick = function(){
			alert("单击事件");
		}
		事件名.ondblclick = function(){
			alert("双击事件");
		}

		绑定事件的方式
		1·行内绑定
		在html标签上直接已属性的形式写事件 = 执行函数
		<button id="id" onclick="alert('sdlf')">
		</button>
		2.动态绑定
		document对象.事件 = function(){
			要执行的程序	}
		btn.onclick = function(){ alert("123")}
		3.事件监听
		通过addEventListener()
		add 添加 	Event 事件 
		Listen听 	er人化
 -->
<div>
	<p id="zz">张大大</p>
	<button id="but")">骑着火车去拉萨</button>
</div>
</body>

</html>